<template>
  <div>
    <el-date-picker
      v-model="year"
      value-format="yyyy"
      type="year"
      placeholder="选择年"
      class="year"
      @change="yearFunc"
    ></el-date-picker>
    <div id="myChart"></div>
  </div>
</template>

<script>
// import * as echartsGl from "../../../commpent/js/gl";
export default {
  components: {},
  props: {},
  data() {
    return {
      Major: [],
      general: [],
      year: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        color: ["#83bff6", "#e5323e"],
        legend: {
          data: ["一般安全隐患", "重大安全隐患"]
        },
        tooltip: {},
        yAxis: {},
        title: {
          text: "统计图"
        },
        xAxis3D: {
          type: "value"
        },
        yAxis3D: {
          type: "value"
        },
        zAxis3D: {
          type: "value"
        },
        grid3D: {},
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ]
          }
        ],
        series: [
          {
            // type: 'scatter3D', //设置图表类型为3d散点图
            name: "一般安全隐患",
            type: "bar",
            data: [
              this.Major.jan,
              this.Major.feb,
              this.Major.mar,
              this.Major.apr,
              this.Major.may,
              this.Major.jun,
              this.Major.jul,
              this.Major.aug,
              this.Major.sept,
              this.Major.oct,
              this.Major.nov,
              this.Major.dec
            ]
          },
          {
            // type: 'scatter3D', //设置图表类型为3d散点图
            name: "重大安全隐患",
            type: "bar",
            data: [
              this.general.jan,
              this.general.feb,
              this.general.mar,
              this.general.apr,
              this.general.may,
              this.general.jun,
              this.general.jul,
              this.general.aug,
              this.general.sept,
              this.general.oct,
              this.general.nov,
              this.general.dec
            ]
          }
        ]
      });
    },
    // 获取日期数据
    DataBar() {
      this.$store.dispatch("BarData", this.year).then(data => {
        for (var i in data) {
          if (data[i].type == "0") {
            this.Major = data[i];
          }
          if (data[i].type == "1") {
            this.general = data[i];
          }
        }
        this.drawLine();
      });
    },
    // 年份回调
    yearFunc(val) {
      this.DataBar();
    }
  },
  created() {
    this.DataBar();
  },
  mounted() {
    this.$store.commit("SET_USER_INFO", "柱状图统计");
  }
};
</script>
<style>
#myChart {
  width: 12rem;
  height: 7rem;
  transform: rotate(90deg);
  position: absolute;
  bottom: 2.5rem;
  left: -2.5rem;
}
.year {
  width: 40% !important;
  z-index: 999;
  position: absolute;
  left: 0;
}
.el-popper {
}
</style>